import EvaluationRecord from '@/components/EvaluationRecord';
import GuidanceRecord from '@/components/GuidanceRecord';
import HealthRecords from '@/components/HealthRecords';
import PhysiologicalMonitoring from '@/components/PhysiologicalMonitoring';
import TrainingRecord from '@/components/TrainingRecord';
import {
  get_platform_guidance_info,
  platform_chatLog_list,
  platform_guidance_patients,
  platform_guidance_record_videos,
} from '@/services/guide';
import { get_patient_info } from '@/services/patient';
import age from '@/utils/age';
import download from '@/utils/downVideo';
import timeToHms from '@/utils/time';
import { ProColumns, ProDescriptions, ProTable } from '@ant-design/pro-components';
import { Button, Divider, Modal, Tabs } from 'antd';
import { useEffect, useState } from 'react';
import Video from './Video';

interface Iprops {
  isShowRemoteappointmentModal: (show: boolean) => void;
  remoteAppointmentModal: boolean;
  remoteAppointmentId: number | undefined;
}
type GithubIssueItem = {
  total_time: any;
  id: number;
  time: string;
  type: number;
  lang_time: string;
  status_d: string;
  status: number;
};

const RemoteAppointmentInfo = (props: Iprops) => {
  const { isShowRemoteappointmentModal, remoteAppointmentId, remoteAppointmentModal } = props;
  // 存储指导详情
  const [guideInfo, setGuideInfo] = useState<any>(undefined);
  // 存储患者信息
  const [patientinfo, setPatientInfo] = useState<any>(undefined);
  // 存储指导患者列表
  const [guidePatient, setGuidePatient] = useState<any>(undefined);
  // 存储患者id
  const [patientId, setPatientId] = useState<number>();
  // 存储视频url
  const [videoUrl, setVideoUrl] = useState('');
  // 查看指导视频模态框
  const [checkVideo, setCheckVideo] = useState(false);
  // 控制查看录制视频模态框的显示与隐藏
  const isShowCheckVideoModal = (status: boolean) => {
    setCheckVideo(status);
  };
  // 页面初始化
  useEffect(() => {
    // 获取指导详情
    const getGuideInfo = async () => {
      if (remoteAppointmentId) {
        let res: any = await get_platform_guidance_info({ id: remoteAppointmentId });
        if (res.code == 200) {
          setGuideInfo(res.data);
        }
      }
    };
    // 获取指导患者列表
    const get_patient_list = async () => {
      if (remoteAppointmentId) {
        let res: any = await platform_guidance_patients({ id: remoteAppointmentId });
        console.log('指导患者列表', res);
        if (res.code == 200) {
          setGuidePatient(res.data);
          // 获取患者详情
          let params: any = await get_patient_info({ id: res.data[0].patient_id });
          console.log('params', params);
          setPatientInfo(params.data);
          setPatientId(params.data.id);
        }
      }
    };
    getGuideInfo();
    get_patient_list();
  }, []);

  // 切换患者用户
  const onChange = async (activeKey: string) => {
    console.log('gggg', activeKey);
    let params: any = await get_patient_info({ id: activeKey });
    if (params.code == 200) {
      setPatientInfo(params.data);
      setPatientId(params.data.id);
    }
  };

  // 获取呼叫记录
  const get_platform_chatLog_list = async (params: {
    pageSize?: number | undefined;
    current?: number | undefined;
    keyword?: string | undefined;
  }) => {
    let request_body = {
      ...params,
      current: params.current,
      pageSize: params.pageSize,
      platform_guidance_id: remoteAppointmentId
    };
    let res: any = await platform_chatLog_list(request_body);
    return {
      data: res.data.list,
      success: true,
      total: res.data.total_count,
    };
  };

  // 获取录制记录列表
  const get_platform_guidance_record_videos = async () => {
    let res: any = await platform_guidance_record_videos({ id: remoteAppointmentId });
    return {
      data: res.data,
      success: true,
      total: res.data.length,
    };
  };

  // 通话记录
  const columns: ProColumns<GithubIssueItem>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '通话时间',
      dataIndex: 'create_time',
      align: 'center',
    },
    {
      title: '通话时长',
      dataIndex: 'time',
      align: 'center',
      render: (_, record) => {
        if (record.status != 3) {
          return record.status_d;
        } else {
          return timeToHms(record.time);
        }
      },
    },
  ];

  // 指导视频
  const columns1: ProColumns<GithubIssueItem>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '开始时间',
      dataIndex: 'start_time',
      align: 'center',
    },
    {
      title: '结束时间',
      dataIndex: 'end_time',
      align: 'center',
    },
    {
      title: '时长',
      dataIndex: 'total_time',
      hideInSearch: true,
      align: 'center',
      render: (_, record) => timeToHms(record.total_time)
    },
    {
      title: '操作',
      hideInSearch: true,
      align: 'center',
      render: (_: any, record: any) => (
        <>
          <Button
            key="detail"
            type="link"
            onClick={() => {
              setVideoUrl(record.playback_url);
              isShowCheckVideoModal(true);
            }}
          >
            查看
          </Button>
          <Button
            key="del"
            type="link"
            onClick={() => {
              download(record.playback_url, record.start_time.replace(/\s/g, '/'), '远程预约');
            }}
          >
            下载
          </Button>
        </>
      ),
    },
  ];
  return (
    <Modal
      title="远程预约详情"
      centered
      open={remoteAppointmentModal}
      onCancel={() => isShowRemoteappointmentModal(false)}
      width={1300}
      footer={null}
      style={{ minWidth: '1300px' }}
    >
      <Divider />
      {guideInfo === undefined ? (
        ''
      ) : (
        <>
          <ProDescriptions
            dataSource={guideInfo}
            column={3}
            columns={[
              {
                title: '指导机构',
                key: 'guidance_name',
                dataIndex: 'guidance_name',
              },
              {
                title: '指导医生',
                key: 'guidance_username',
                dataIndex: 'guidance_username',
              },
              {
                title: '指导账号',
                key: 'guidance_phone',
                dataIndex: 'guidance_phone',
              },
              {
                title: '指导时间',
                key: 'actual_endtime',
                dataIndex: 'actual_endtime',
              },
              {
                title: '预约账号',
                key: 'platform_phone',
                dataIndex: 'platform_phone',
              },
              {
                title: '计划指导时间',
                key: 'plan_time',
                dataIndex: 'plan_time',
              },

              {
                title: '指导记录',
                key: 'content',
                dataIndex: 'content',
              },
            ]}
          ></ProDescriptions>
          <Tabs
            defaultActiveKey="通话记录"
            items={[
              {
                key: '通话记录',
                label: '通话记录',
                children: (
                  <ProTable<GithubIssueItem>
                    columns={columns}
                    cardBordered
                    request={async (params, sort, filter) => get_platform_chatLog_list(params)}
                    editable={{
                      type: 'multiple',
                    }}
                    rowKey={(record) => record.id}
                    search={false}
                    options={false}
                    pagination={{
                      pageSize: 10,
                    }}
                    dateFormatter="string"
                    headerTitle=""
                  />
                ),
              },
              {
                key: '患者列表',
                label: '患者列表',
                children: (
                  <>
                    {guidePatient === undefined && patientinfo === undefined ? (
                      <></>
                    ) : (
                      <Tabs
                        type="card"
                        tabPosition="left"
                        onChange={onChange}
                        items={guidePatient.map((item: any, index: number) => {
                          return {
                            label: (
                              <>
                                <img
                                  style={{ width: '30px', height: '30px', borderRadius: '50%' }}
                                  src={
                                    item.patient_headimg ? item.patient_headimg : '/head_img.svg'
                                  }
                                  alt=""
                                />
                                <span style={{ marginLeft: '20px' }}>{item.patient_name}</span>
                              </>
                            ),
                            key: item.patient_id,
                            children: (
                              <>
                                <ProDescriptions
                                  dataSource={patientinfo}
                                  columns={[
                                    {
                                      title: '手机号',
                                      key: 'phone',
                                      dataIndex: 'phone',
                                    },
                                    {
                                      title: '姓名',
                                      key: 'username',
                                      dataIndex: 'username',
                                    },
                                    {
                                      title: '性别',
                                      key: 'sex',
                                      dataIndex: 'sex',
                                      valueType: 'select',
                                      valueEnum: {
                                        0: {
                                          text: '未知',
                                        },
                                        1: {
                                          text: '男',
                                        },
                                        2: {
                                          text: '女',
                                        },
                                      },
                                    },
                                    {
                                      title: '身份证号',
                                      key: 'id_card',
                                      dataIndex: 'id_card',
                                    },
                                    {
                                      title: '年龄',
                                      key: 'age',
                                      dataIndex: 'age',
                                      render: (_, record) => age(record.birth),
                                    },
                                    {
                                      title: '家庭地址',
                                      key: 'address',
                                      dataIndex: 'address',
                                      render: (_, record) => {
                                        return (
                                          record.province_name +
                                          record.city_name +
                                          record.area_name +
                                          record.family_address
                                        );
                                      },
                                    },
                                  ]}
                                ></ProDescriptions>
                                <Tabs
                                  defaultActiveKey="生理监测"
                                  items={[
                                    {
                                      key: '生理监测',
                                      label: '生理监测',
                                      children: (
                                        <PhysiologicalMonitoring
                                          patientId={patientId}
                                        ></PhysiologicalMonitoring>
                                      ),
                                    },
                                    {
                                      key: '评估记录',
                                      label: '评估记录',
                                      children: (
                                        <EvaluationRecord
                                          type={false}
                                          patientId={patientId}
                                        ></EvaluationRecord>
                                      ),
                                    },
                                    {
                                      key: '训练记录',
                                      label: '训练记录',
                                      children: (
                                        <TrainingRecord patientId={patientId}></TrainingRecord>
                                      ),
                                    },
                                    {
                                      key: '指导记录',
                                      label: '指导记录',
                                      children: (
                                        <GuidanceRecord patientId={patientId}></GuidanceRecord>
                                      ),
                                    },
                                    {
                                      key: '健康档案',
                                      label: '健康档案',
                                      children: (
                                        <HealthRecords info={patientinfo?.info}></HealthRecords>
                                      ),
                                    },
                                  ]}
                                // onChange={onChange}
                                />
                              </>
                            ),
                          };
                        })}
                      />
                    )}
                  </>
                ),
              },
              {
                key: '指导视频',
                label: '指导视频',
                children: (
                  <ProTable<GithubIssueItem>
                    columns={columns1}
                    cardBordered
                    request={async (params, sort, filter) => get_platform_guidance_record_videos()}
                    editable={{
                      type: 'multiple',
                    }}
                    rowKey={(record) => record.id}
                    search={false}
                    options={false}
                    pagination={{
                      pageSize: 10,
                    }}
                    dateFormatter="string"
                    headerTitle=""
                  />
                ),
              },
            ]}
          />
        </>
      )}
      {/* 查看录制视频模态框 */}
      {checkVideo ? (
        <Video
          checkVideo={checkVideo}
          isShowCheckVideoModal={isShowCheckVideoModal}
          videoUrl={videoUrl}
        ></Video>
      ) : (
        ''
      )}
    </Modal>
  );
};
export default RemoteAppointmentInfo;
